<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../09_swiper/swiper-bundle.min.css">
   
    <!-- 详情页 -->
</head>
<body>
    <div class="box">
        <!-- 导航栏 -->
        <div class="index" id="nav">
            <ul>
                <img src="" alt="">
                <li><a href="./login.html">登录/注册</a></li>
                <li><a>消息中心</a></li>
                <li><a>收藏夹</a></li>
                <li><a>郑重声明</a></li>
                <li><a>帮助</a></li>
                <li><input type="text" value="输入商品名或货号"><button class="mybtn"><i class="iconfont icon-search"></i></button>
                    <div class="sous">
                        <ol>
                            <li>热门搜索</li>
                            <li>换一批</li>
                        </ol>
                        <ul>
                            <li>扫除</li>              
                            <li>起泡网</li>
                            <li>乳液</li>
                            <li>蜡烛</li>
                            <li>笔记本</li>
                            <li>衣架</li>
                            <li>薯条</li>
                            <li>化妆棉</li>
                        </ul>
                       </div>
                </li> 
                <li><i class="iconfont icon-cart"></i></li>
            </ul>
        </div>
        <!-- 内容 整个的放大镜区域 -->
        <div class="nrong">
            <div class="nr_left" id="box">
              <!-- 正常显示的图片 -->
                <div class="page-top">
                    <img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/972b0a20-6510-48a7-80e9-c6dfd3f7527a.jpg">
                </div>

                <div class="page-buttom">

                  <!-- 切换的图片列表 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/87884a4a-454c-4f3e-8c9b-df2a00d3e552.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/87884a4a-454c-4f3e-8c9b-df2a00d3e552.jpg"></div>
                      <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/972b0a20-6510-48a7-80e9-c6dfd3f7527a.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/972b0a20-6510-48a7-80e9-c6dfd3f7527a.jpg"></div>
                      <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/972b0a20-6510-48a7-80e9-c6dfd3f7527a.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/972b0a20-6510-48a7-80e9-c6dfd3f7527a.jpg"></div>
                      <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/6685c623-1172-4f14-b7fe-41aa398c43bf.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/6685c623-1172-4f14-b7fe-41aa398c43bf.jpg"></div>
                      <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/fb1f22da-7f1f-4bdd-8444-22d927064063.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/fb1f22da-7f1f-4bdd-8444-22d927064063.jpg"></div>
                      <div class="swiper-slide"><img data-show="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/87884a4a-454c-4f3e-8c9b-df2a00d3e552.jpg" src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/87884a4a-454c-4f3e-8c9b-df2a00d3e552.jpg"></div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div> 
                  
                </div>

                        <!-- 放大镜效果 -->
                        <!-- 遮罩层盒子 -->
                        <div class="mask"></div>


                       <!-- 放大镜的盒子 -->
                      <div class="enlarge"></div>
            </div>

        <div class="nr_right">
            <div class="right_nrz"><span>IDÉE 短袖连衣裙</span></div>
            <div class="right_nrx"><span>价格</span><span>￥</span><span>458</span></div>
            <div class="right_nrc"><div><span>尺码</span><a>均码</a></div></div>
            <div class="right_nrv">
                <div>
                <span>颜色</span>
                <div>
                    <a href="javascript:void(0);">浅银灰色</a>
                    <a href="javascript:void(0);">烟熏粉色</a>
                    <a href="javascript:void(0);">橙色</a>
                    <a href="javascript:void(0);">黄色</a>
                    <a href="javascript:void(0);">绿色</a>
                    <a href="javascript:void(0);">黑色</a>
                    <a href="javascript:void(0);">红色</a>
                    <a href="javascript:void(0);">宝蓝色</a>
                </div>
            </div>
        </div>
            <div class="right_nrb">
                <div>
                <span>配送</span>
                <a href="javascript:void(0);">快递寄送</a>
               </div>
            </div>
            <div class="right_nrn">
                <div>
                <span>数量</span>
                <div>
                    <a href="javascript:void(0);">-</a>
                    <input type="number" value="1">
                    <a href="javascript:void(0);">+</a>件
                </div>
              </div>
            </div>
            <div class="right_nrm"><a>立即购买</a><a>加入购物车</a></div>
            </div>

        </div>


            
            

    </div>


        <!-- 商品详情 -->
        <div class="xqing">
            <div class="xq_left">
                <div class="left_top"><span>推荐商品</span></div>
               <div class="left_buttom">
                   <div class="smab"><img src="" alt="向上滑动"></div>
                   
                    <div class="nrong_two">
                
                        <ul class="content container">
                           <li>
                             <div class="show">
                               <img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/440d7675-f9ff-4cd3-ba51-6594e450f619.jpg" alt="">
                             </div>
                             <div class="info">
                               <p class="title">IDEE短袖连衣裙</p>
                               <p class="price">
                                 <del class="old"> ￥ 458 </del>
                                 <span class="current">月销量165</span>
                               </p>
                             </div>
                           </li>
                         </ul>
                     </div> 

                     <div class="nrong_two">
                
                        <ul class="content container">
                           <li>
                             <div class="show">
                               <img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/440d7675-f9ff-4cd3-ba51-6594e450f619.jpg" alt="">
                             </div>
                             <div class="info">
                               <p class="title">IDEE短袖连衣裙</p>
                               <p class="price">
                                 <del class="old"> ￥ 458 </del>
                                 <span class="current">月销量165</span>
                               </p>
                             </div>
                           </li>
                         </ul>
                     </div> 

                     <div class="nrong_two">
                
                        <ul class="content container">
                           <li>
                             <div class="show">
                               <img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/440d7675-f9ff-4cd3-ba51-6594e450f619.jpg" alt="">
                             </div>
                             <div class="info">
                               <p class="title">IDEE短袖连衣裙</p>
                               <p class="price">
                                 <del class="old"> ￥ 458 </del>
                                 <span class="current">月销量165</span>
                               </p>
                             </div>
                           </li>
                         </ul>
                     </div> 

                   </div>
                   <div class="smaa"><img src="" alt="向下滑动"></div>
               </div>
            </div>

            <div class="xq_right">
                <div class="right_top"><span>产品参数</span></div>
                <div class="top_one">
                    <div><span>货号：4550344940846</span></div>
                    <div><span>品番：YD17CC1S</span></div>
                    <div><span>季节：秋</span></div>
                    <div><span>原产地：中国</span></div>
                    <div><span>素材：棉70%，亚麻30%</span></div>
                </div>
                <div class="right_top">
                    <div class="ear_q">
                    <span>详情</span>
                   </div>
                   <div class="page">
                   <div class="page-title">IDÉE 长开衫</div>
                   <div class="page-info">基本信息</div>
                   <div class="page-mate">商品材质：棉70%，亚麻30%</div>
                   <div class="page-teral"><span>尺&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;&nbsp;&nbsp;&nbsp;均码</span></div>
                   <div class="page-teral"><span>颜&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色：&nbsp;浅银灰色/烟熏粉色/橙色/黄色/绿色/黑色/红色/宝蓝色</span></div>
                   <div class="page-teral"><span>产&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地：&nbsp;中国</span></div>
                    </div>   
                </div>

                <div class="right_buttom">
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/ff5ccc61-c534-4241-90b9-ef38d78327a8.jpg" alt=""></div>
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/7b7fa121-f604-445d-b7f7-0c801ef0fea9.jpg" alt=""></div>
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms1/b35f5ab2-b82a-4b44-b066-8c77432a6f69.jpg" alt=""></div>
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms307/0b1692e7-ff80-468f-8c60-016f39916059.png" alt=""></div>
                     <div><img src="https://mujipywebblob.blob.core.chinacloudapi.cn/oms307/51e60eb3-90a7-40b8-a037-f5dd0823b704.png" alt=""></div>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="bottom">
            <div class="btm1">
                <ul>
                    <li>@ghavsh uqgsugs quuqgd.</li>
                    <li>营业执照</li>
                    <li>陆icp08182256</li>
                    <li>@无印良品上海商业有限公司</li>
                    <li>食品经营许可证</li>
                    <li>陆公安27813783273</li>
                    <li>地址：上海市</li>
                    <li>出版经营许可</li>
                    <li>上海供货商</li>
                </ul>
            </div>
        </div>

        
    </div>
        
        <script src="../js/utils.js"></script>
        <script src="../09_swiper/swiper-bundle.min.js"></script>
        <script src="../jquery/jquery.min.js"></script>
        <script src="../js/detail.js"></script>

        <script>
              const e = new Enlarge('#box')
              console.log(e)
        </script>
</body>
</html>